<template>
	<view class="content">
		<view class="search">
			<text class="icon iconfont icon-sousuotianchong"></text>
			<input type="text" v-model="keyword" placeholder="请输入搜索关键字">
			<view @click="search">搜索</view>
		</view>
		<view class="tips">
			<text class="tip">搜索历史</text>
			<text class="iconfont icon-delete" @click="delAll"></text>
		</view>
		<view class="history" v-for="(item,index) in history">

			<text class="tip" @click="choose(item)">{{item}}</text>
			<text class="iconfont icon-delete" @click="del(index)"></text>

		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		onMounted
	} from 'vue';
	export default {
		onload() {

		},
		setup() {
			const history = ref([]);
			const keyword = ref("");

			const search = () => {
				console.log("执行搜索");

				if (keyword.value == "") {
					uni.showToast({
						title: "请填写关键词",
						icon: 'none'
					})
					return;
				}
				//保存历史记录
				if (history.value.indexOf(keyword.value) == -1) {
					console.log(history);
					history.value.unshift(keyword.value);
					// keyword.value = "";
					uni.setStorageSync("history", history.value)
				}
				//去搜索
				uni.navigateTo({
					url: "/pages/search/result?kw=" + keyword.value
				})
			}

			const delAll = () => {
				history.value = [];
			}

			const del = (i) => {
				history.value.splice(i, 1);
			}

			onMounted(function() {
				history.value = uni.getStorageSync("history") || [];
			})

			const choose = (kw) => {
				keyword.value = kw
			}


			return {
				history,
				keyword,
				search,
				delAll,
				del,
				onMounted,
				choose
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("https://at.alicdn.com/t/c/font_3630446_w2q4khqm4ro.css");

	.content {}

	.search {
		display: flex;
		align-items: center;
		// margin: 28rpx;
		// box-sizing: border-box;
		padding: 18rpx;

		text {
			flex: 1;
			padding: 0rpx 10rpx;
			font-size: 48rpx;
			color: #cccccc;
		}

		input {
			flex: 8;
			padding: 15rpx 15rpx 15rpx 30rpx;
			background-color: #efefef;
			font-size: 24rpx;
			border-radius: 32rpx;
		}

		view {
			felx: 1;
			padding: 0rpx 10rpx;
			font-size: 32rpx;
		}
	}

	.tips {
		display: flex;

		text {
			flex: 1;
			font-size: 32rpx;
			padding: 12rpx 28rpx;
			font-weight: 600;
		}

		.tip {
			text-align: left;
		}

		.iconfont {
			text-align: right;
			color: #4aaf45;
			font-size: 48rpx;
		}
	}

	.history {
		display: flex;

		text {
			flex: 1;
			font-size: 32rpx;
			padding: 12rpx 28rpx;
			font-weight: 400;
		}

		.tip {
			text-align: left;
		}

		.iconfont {
			text-align: right;
		}
	}
</style>
